<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #e1e1e1;
				color: #333;
				font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB",STHeiti,sans-serif!important;
			}
			ul,li{
				list-style-type: none;
			}
			li {
				display: block;
			}
			a{
				text-decoration: none;
			}
			@keyframes ni {
				from {background-color:#ccc;}
				to {background-color:#fff;}
			}
			@keyframes bc{
				from{background-color: #5bc0de;}
				to{background-color: #08c;}
			}
			.active-tab {
			  background-color: #80bd01;
			  color: #fff;
			}
			.active-tab:hover {
			  color: #fff;
			}
			.unactive-tab {
			  background-color: #f6f6f6;
			  color: #80bd01;
			}
			.unactive-tab:hover {
			  color: #08c;
			}
			.top {
			  background: #80bd01;
			  padding: 2px 4px;
			  border-radius: 3px;
			  color: #fff;
			  font-size: 12px;
			  margin-right: 5px;
			}
			.untop {
			  background-color: #e5e5e5;
			  color: #999;
			  padding: 2px 4px;
			  font-size: 12px;
			  border-radius: 3px;
			  margin-right: 5px;
			}
			.message_handle {
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			}
			
			.navbar {
			  background: #444;
			  width: 100%;
			  font-size: 13px;
			  margin-bottom: 15px;
			}
			.navbar .navbar_inner{
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.navbar .container{
				width: 30%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.navbar .brand{
				width: 120px;
				padding: 3px 20px;
				padding-left: 0;
				height: 34px;
				line-height: 34px;
				color: #ccc;
				font-weight: 700;
				cursor: pointer;
			}
			.navbar .search-query{
				background: url(https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
				padding: 3px 5px 3px 22px;
				color: #666;
				margin-top: 2px;
				font-size: 13px;
				font-weight: 400;
				line-height: 1;
				border-radius: 15px;
				width: 180px;
			}
			.navbar .search-query:hover,.search-query:active{
				animation:ni 1.5s;
				animation-fill-mode: forwards;
			}
			.navbar .nav ul{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
			}
			.navbar .nav ul li{
				padding: 10px;
				color: #ccc;
				cursor: pointer;
			}
			.navbar .nav ul li:hover{
				color: #fff;
			}
			
			.main{
				width: 90%;
				margin: 0 auto;
			}
			.main .content {
				width: 73%;
				border-radius: 5px;
			}
			.main .content .header {
				font-size: 14px;
				padding: 10px;
				background-color: #f6f6f6;
				width: 100%;
			}
			.main .content .header ul {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.main .content .header ul li div {
				line-height: 20px;
				padding: 3px 4px;
				border-radius: 5px;
				margin: 0 10px;
				cursor: pointer;
			}
			.main .content .cells .cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
				background: #fff;
				border-top: 1px solid #f0f0f0;
				width: 100%;
			}
			.main .content .cells .cell .left_msg{
				display: flex;
				align-items: center;
				width:80%;
			}
			.main .content .cells .cell .right_msg{
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				cursor: pointer;
				width: 10%;
			}
			.main .content .cells .cell .left_msg .user_avatar{
				width: 30px;
				height: 30px;
				border-radius: 3px;
				cursor: pointer;
			}
			.main .content .cells .cell .reply_count {
				width: 70px;
				display: inline-block;
				text-align: center;
			}
			.main .content .cells .cell .reply_count .count_of_replies {
				font-size: 14px;
				color: #9e78c0;
			}
			.main .content .cells .cell .reply_count .count_seperator{
				margin: 0 -3px;
				font-size: 12px;
				color: #b4b4b4;
			}
			.main .content .cells .cell .reply_count .count_of_visits{
				font-size: 12px;
				color: #b4b4b4;
			}
			.main .content .cells .cell .topic_title {
			  display: inline-block;
			  vertical-align: middle;
			  font-size: 16px;
			  line-height: 30px;
			  color: #333;
			  width: 555px;
			  cursor: pointer;
			}
			.main .content .cells .cell .topic_title:hover {
			  text-decoration: underline;
			}
			.main .content .cells .cell .user_small_avatar {
				height: 18px;
				width: 18px;
				vertical-align: middle;
				margin-right: 0.5em;
				border-radius: 3px;
			}
			.main .content .cells .cell .last_active_time {
				text-align: right;
				min-width: 50px;
				display: inline-block;
				white-space: nowrap;
				color: #778087;
				font-size: 10px;
			}
			.up {
			    width: 20px;
			    font-size: 16px;
			    position: fixed;
			    right: 0;
			    bottom: 50px;
			    background: #fff;
			    padding: 2px;
			    text-align: center;
			    border-radius: 3px;
				display: none;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="navbar">
			<div class="navbar_inner">
				<div class="container">			
					<div class="brand">
						<img src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"/>
					</div>
					<div class="search_form">
						<form action="/search" method="get">
						  <input type="text" name="q" class="search-query" value="">
						</form>
					</div>
				</div>
				<div class="nav">
					<ul>
						<li>
							<div>首页</div>
						</li>
						<li>
							<div>新手入门</div>
						</li>
						<li>
							<div>API</div>
						</li>
						<li>
							<div>关于</div>
						</li>
						<li>
							<div>注册</div>
						</li>
						<li>
							<div>登录</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="content">
				<div class="header">
					<ul>
						<li>
							<div class="active-tab">全部</div>
						</li>
						<li>
							<div class="unactive-tab">精华</div>
						</li>
						<li>
							<div class="unactive-tab">分享</div>
						</li>
						<li>
							<div class="unactive-tab">问答</div>
						</li>
						<li>
							<div class="unactive-tab">招聘</div>
						</li>
						<li>
							<div class="unactive-tab">客户端测试</div>
						</li>
					</ul>
				</div>
				<div class="cells">
					<div class="cell">
						<div class="left_msg">
							<div>
								<img class="user_avatar" src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120" title="jothy1023">
							</div>
							<div>
								<span class="reply_count">
									<span class="count_of_replies" title="回复数">
									  2
									</span>
									<span class="count_seperator">/</span>
									<span class="count_of_visits" title="点击数">
									  27719
									</span>
								</span>
							</div>
							<div>
								<span class="lab top">置顶</span>
							</div>
							<div  class="topic_title message_handle" title="精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至">
								精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至
							</div>
						</div>
						<div class="right_msg">
							<div><span class="last_active_time">8 天前</span></div>
							<div><img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="up">
			回到顶部
		</div>
		<script type="text/javascript">
			window.onload = function(){
				brandLink();
				userAvatar();
				var navLinkArray = ['/','/getstart','/api','/about','/signup','signin'];
				var topicTitleArray = ['618e03abe6c91ab080916c8a']
				var lastTimeArray = ['618e03abe6c91ab080916c8a#61aa38f63dbd6690c231952c']
				addLink('.nav>ul>li',navLinkArray,'');
				addLink('.topic_title',topicTitleArray,'/topic/');
				addLink('.right_msg',lastTimeArray,'/topic/');
				var labels = ['置顶','精华','分享','问答','招聘','测试'];
				loopCreate(labels);
				headerToGet(labels)
				
			}
			function headerToGet(arr){
				var labs = document.getElementsByClassName('lab');
				var tops = document.querySelectorAll('.header>ul>li');
				for(let index in tops){
					if(isNaN(Number(index))){
						break;
					}
					if(index==0){
						tops[0].addEventListener('click',function(){
							for(let item of labs){
								item.parentNode.parentNode.parentNode.style.display='flex';
							}
						});
						continue;
					}
					if(index==5){
						tops[5].addEventListener('click',function(){
							for(let item of labs){
								if(!('测试'==item.innerText)){
									item.parentNode.parentNode.parentNode.style.display='none';
								}else{
									item.parentNode.parentNode.parentNode.style.display='flex';
								}
							}
						});
						continue;
					}
					tops[index].addEventListener('click',function(){
						for(let item of labs){
							if(!(tops[index].innerText==item.innerText)){
								item.parentNode.parentNode.parentNode.style.display='none';
							}else{
								item.parentNode.parentNode.parentNode.style.display='flex';
							}
						}
					})
				}
				
			}
			function brandLink(){
				var brand = document.getElementsByClassName('brand')[0];
				brand.addEventListener('click',function(){
					location.href = '/'
				})
			}
			function addLink(selector,arr,prefix){
				var nodes = document.querySelectorAll(selector);
				for(let index in nodes){
					if(isNaN(Number(index))){
						break;
					}
					nodes[index].addEventListener('click',function(){
						location.href = prefix+arr[index]
					})
				}
			}
			function userAvatar(){
				var uAvatars = document.getElementsByClassName('user_avatar');
				for (let ava of uAvatars) {
					ava.addEventListener('click',function(){
						location.href = '/user/'+ava.title
					})
				}
			}
			function loopCreate(arr){
				for (var i = 0; i < 24; i++) {
					msgListCreate(arr[i%(arr.length)]);
					
				}
				checkTop()
			}
			function msgListCreate(msg){
				var cells = document.getElementsByClassName('cells')[0];
				var cell = document.createElement('div');
				cell.className = 'cell';
				var leftMsg = document.createElement('div');
				leftMsg.className = 'left_msg';
				leftMsg.innerHTML='<div><img class="user_avatar" src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120" title="jothy1023">'+
				'</div><div><span class="reply_count"><span class="count_of_replies" title="回复数">2</span>'+
				'<span class="count_seperator"> / </span><span class="count_of_visits" title="点击数">27719</span>'+
				'</span></div><div><span class="lab">'+msg+'</span></div>'+
				'<div  class="topic_title message_handle">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>';
				var rightMsg = document.createElement('div');
				rightMsg.className = 'right_msg';
				rightMsg.innerHTML='<div class="right_msg"><div><span class="last_active_time">8 天前</span>'+
				'</div><div><img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120"></div></div>';
				cell.appendChild(leftMsg);
				cell.appendChild(rightMsg);
				cells.append(cell);
			}
			function checkTop(){
				var labels = document.getElementsByClassName('lab');
				for (let lab of labels) {
					if(lab.innerText=='置顶'||lab.innerText=='精华'){
						lab.className+=' top';
					}else{
						lab.className+=' untop';
					}
				}
			}
			window.addEventListener('scroll',function(){
				var distance = document.documentElement.scrollTop||document.body.scrollTop;
				var up = document.getElementsByClassName('up')[0];
				up.style.opacity=parseFloat(distance/300);
				if(distance>0||up.style.opacity>=1){
					up.style.display='flex';
				}
				if(distance<=0||up.style.opacity<=0){
					up.style.display='none';
				}
			})
			document.getElementsByClassName('up')[0].addEventListener('click',function(){
				document.documentElement.scrollTop=0;
				document.body.scrollTop=0;
			})
		</script>
	</body>
</html>
